import _mergeJSXProps2 from "@vue/babel-helper-vue-jsx-merge-props";
import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
import {addUnit, createNamespace, isDef} from '../utils';
import Icon from '../icon';

var _createNamespace = createNamespace('image'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

export default createComponent({
    props: {
        src: String,
        fit: String,
        alt: String,
        round: Boolean,
        width: [Number, String],
        height: [Number, String],
        radius: [Number, String],
        lazyLoad: Boolean,
        showError: {
            type: Boolean,
            default: true
        },
        showLoading: {
            type: Boolean,
            default: true
        },
        errorIcon: {
            type: String,
            default: 'warning-o'
        },
        loadingIcon: {
            type: String,
            default: 'photo-o'
        }
    },
    data: function data() {
        return {
            loading: true,
            error: false
        };
    },
    watch: {
        src: function src() {
            this.loading = true;
            this.error = false;
        }
    },
    computed: {
        style: function style() {
            var style = {};

            if (isDef(this.width)) {
                style.width = addUnit(this.width);
            }

            if (isDef(this.height)) {
                style.height = addUnit(this.height);
            }

            if (isDef(this.radius)) {
                style.overflow = 'hidden';
                style.borderRadius = addUnit(this.radius);
            }

            return style;
        }
    },
    created: function created() {
        var $Lazyload = this.$Lazyload;

        if ($Lazyload) {
            $Lazyload.$on('loaded', this.onLazyLoaded);
            $Lazyload.$on('error', this.onLazyLoadError);
        }
    },
    beforeDestroy: function beforeDestroy() {
        var $Lazyload = this.$Lazyload;

        if ($Lazyload) {
            $Lazyload.$off('loaded', this.onLazyLoaded);
            $Lazyload.$off('error', this.onLazyLoadError);
        }
    },
    methods: {
        onLoad: function onLoad(event) {
            this.loading = false;
            this.$emit('load', event);
        },
        onLazyLoaded: function onLazyLoaded(_ref) {
            var el = _ref.el;

            if (el === this.$refs.image && this.loading) {
                this.onLoad();
            }
        },
        onLazyLoadError: function onLazyLoadError(_ref2) {
            var el = _ref2.el;

            if (el === this.$refs.image && !this.error) {
                this.onError();
            }
        },
        onError: function onError(event) {
            this.error = true;
            this.loading = false;
            this.$emit('error', event);
        },
        onClick: function onClick(event) {
            this.$emit('click', event);
        },
        genPlaceholder: function genPlaceholder() {
            var h = this.$createElement;

            if (this.loading && this.showLoading) {
                return h("div", {
                    "class": bem('loading')
                }, [this.slots('loading') || h(Icon, {
                    "attrs": {
                        "name": this.loadingIcon
                    },
                    "class": bem('loading-icon')
                })]);
            }

            if (this.error && this.showError) {
                return h("div", {
                    "class": bem('error')
                }, [this.slots('error') || h(Icon, {
                    "attrs": {
                        "name": this.errorIcon
                    },
                    "class": bem('error-icon')
                })]);
            }
        },
        genImage: function genImage() {
            var h = this.$createElement;
            var imgData = {
                class: bem('img'),
                attrs: {
                    alt: this.alt
                },
                style: {
                    objectFit: this.fit
                }
            };

            if (this.error) {
                return;
            }

            if (this.lazyLoad) {
                return h("img", _mergeJSXProps([{
                    "ref": "image",
                    "directives": [{
                        name: "lazy",
                        value: this.src
                    }]
                }, imgData]));
            }

            return h("img", _mergeJSXProps2([{
                "attrs": {
                    "src": this.src
                },
                "on": {
                    "load": this.onLoad,
                    "error": this.onError
                }
            }, imgData]));
        }
    },
    render: function render() {
        var h = arguments[0];
        return h("div", {
            "class": bem({
                round: this.round
            }),
            "style": this.style,
            "on": {
                "click": this.onClick
            }
        }, [this.genImage(), this.genPlaceholder()]);
    }
});